<template>
	<view class="content bg-#F6F9F8 h-100vh" :style="'background: url('+ossurl('/ai_tour/assets/static/line/page_bg.png')+') no-repeat; background-size: 100% 100%;'">
		<custom_navbar :title="navbar_title" theme="dark" />
		<u-empty v-if="route_list.length == 0"
		 icon="/static/images/no_punch.png"
		 mode="list" text="暂无推荐路线"
		 marginTop="120px"
		 ></u-empty>
		 <view class="logo">
			 <image :src="ossurl(spot_data.logo)" mode="widthFix"></image>
		 </view>
		 <ls-swiper @change="change" :list="route_list" imgKey="imgUrl" :crown="true" :loop="true" :shadow="true" :height="450" :previousMargin="120" :nextMargin="120" :imgRadius="40">
		 	<template v-slot="{data}">
		 		<view class="tab">
		 			<image class="tab-img" lazy-load :src="data.imgUrl" mode=""></image>
		 			<!-- <text class="tab-title f-bold f34 lb-6">{{data.title}}</text>
		 			<view class="tab-tag">{{data.duration}}个推荐地点</view> -->
					<view class="tab-bg">
						<view class="title">{{data.title}}</view>
						<view class="desc">
							<view class="descLeft">
								<view class="item">
									<view class="itemImg">
										<image src="@/static/images/line/spot.png" mode="widthFix"></image>
									</view>
									<view class="itemTxt">
										<text class="num">{{data.points_count}}</text>
										<text class="str">景点</text>
									</view>
								</view>
							</view>
							<view class="descRight">
								<view class="item">
									<view class="itemImg">
										<image src="@/static/images/line/time.png" mode="widthFix"></image>
									</view>
									<view class="itemTxt">
										<text class="str">约</text>
										<text class="num">{{data.duration}}</text>
										<text class="str">分钟</text>
									</view>
								</view>
							</view>
						</view>
						<scroll-view class="scrollBox" scroll-x="true" scroll-left="193">
							
								<view class="tabBox">
									<view class="tabIcon"  v-for="(v, k) in data.many_image" :key="k">
										<image :src="v" mode="scaleToFill"></image>
									</view>
				
								</view>
										
											
						</scroll-view>
					</view>
		 		</view>
		 	</template>
		 </ls-swiper>
		 
		 <view class="btn" @click="viewDetail">查看详情</view>
	</view>	 
</template>

<script>
	import { navigateTo, navigateBack } from "@/hooks";
	import { getRouteList } from "@/api/home.js";
	import custom_navbar from "@/components/custom_navbar/index.vue";
	import LsSwiper from "@/components/ls-swiper/index.vue";
	import { ossurl } from '@/utils/index';
	export default {
		components: { custom_navbar,LsSwiper},
		data() {
			return {
				navigateTo,
				navbar_title: "推荐路线",
	
				spotId: 0,
				spot_data:[],
				route_list:[],
				
				
				data:{},
				
				
			}
		},
		computed: {
			rec_url() {
				return this.$store.getters.rec_url;
			}
		},
		onLoad(options) {
		    if (options.spot_id) {
		        this.spotId = Number(options.spot_id);
		    }
			//this.data = base_lsit[0];
		    this.dataList();
		},

		methods: {
			ossurl,

			dataList() {
				var _this =this;
			    let params = {
					spot_id: this.spotId
			    };
			    getRouteList(params).then(res => {
			        if (res.code == 200) {
						var d = res.data;
			            _this.spot_data = d.spot_data;
						var dataList = d.route_list;
			
						dataList.forEach(function (item, key) {
							console.log(key,item);
							dataList[key]['back_image'] = ossurl(item.back_image);
							dataList[key]['imgUrl'] = ossurl(item.back_image);
							var many_image = item.many_image;
							many_image.forEach(function (v, k) {
								many_image[k] = ossurl(v);
							});	
							dataList[key]['many_image'] = many_image;
						});
						
			            _this.route_list = dataList;
						_this.data = dataList[0];
						
			        }
			    })
			},
			change(data) {
				this.data = data;
			},
			viewDetail(){
				var _this =this;
				uni.navigateTo({
					url:"/pagesA/scenic_punch/lineDetail?id="+_this.data.id+"&spot_id="+_this.spotId,
				})
			},
		}
	}
</script>

<style lang="scss">

	 .content{
		width: 100%; height: 100vh;
	 }
	 .dataList{width: 100%; height: auto;}	
	 
	 .logo{ width: 100%; height: auto; text-align: center; margin-bottom: 40rpx;}
	 .logo image{width: 280rpx; height: auto; margin: 20rpx auto;}
	 .tab {
	 	width: 100%;
	 	height: calc(100% - 20rpx);
	 	margin-bottom: 20rpx;
	 	position: relative;
	 	border-radius: 40rpx;
	 	// background-color: #000;
	 	box-shadow: 0 0 14rpx 0 rgba(0, 0, 0, 0.1);
	 
	 	.tab-img {
	 		width: 100%;
	 		height: 100%;
	 		border-radius: 40rpx;
	 		opacity: 0.9;
	 		box-shadow: 0 6px 6px rgba(0, 0, 0, .15);
	 	}
		.tab-bg{ 
			position: absolute;
			top: 450rpx;
			width:100%; height: 435rpx;
			border-bottom-left-radius: 40rpx;
			border-bottom-right-radius: 40rpx;
			
			background: url('/static/images/line/box_bg.png') no-repeat; background-size: 100% 100%;
		
			.title{
				margin-top: 50rpx;
				width: 100%;
				font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
				font-weight: 900;
				font-size: 44rpx;
				color: #FFFFFF;
				line-height: 60rpx;
				padding-left: 24rpx;
				
				 white-space: nowrap;      /* 防止文本换行 */
				  overflow: hidden;         /* 隐藏超出容器的文本 */
				  text-overflow: ellipsis;  /* 超出部分显示为省略号 */
			}
			.desc{
				width: 100%; height: 100rpx; display: flex;
				padding-left: 24rpx;
				.descLeft{
					width: 40%;
					.item{
						width: 100%;
						height: auto;
						display: flex;
						.itemImg{
							width: 60rpx;
							
							image{width: 40rpx; height: 40rpx; margin-top: 20rpx;}
						}
						.itemTxt{
							width: auto;
							color: #FFFFFF;
							text{margin: 0rpx 10rpx;}
							.num{ font-family: DIN-BlackItalic, DIN-BlackItalic;
font-weight: 500;
font-size: 48rpx;}
							.str{font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
font-weight: 400;
font-size: 28rpx;}
						}
					}
					
				}
				.descRight{
					width: auto;
					.item{
						width: 100%;
						height: auto;
						display: flex;
						.itemImg{
							width: 60rpx;
							image{width: 40rpx; height: 40rpx; margin-top: 20rpx;}
						}
						.itemTxt{
							width: auto;
							color: #FFFFFF;
							text{margin: 0rpx 10rpx;}
							.num{ font-family: DIN-BlackItalic, DIN-BlackItalic;
font-weight: 500;
font-size: 48rpx;}
							.str{font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
font-weight: 400;
font-size: 28rpx;}
						}
					}
					
				}
			
			
			}
			
			.scrollBox {
					width: 100%;
					height: 156rpx;
					margin-top: 20rpx;
					.tabBox {
						width: 100%;
						height: 156rpx;
						display: flex;
						text-align: center;
						.tabIcon{
							width: 156rpx;
							height: 156rpx;
							margin: 0rpx 20rpx;
							image{ width: 134rpx; height: 134rpx; border-radius: 16rpx; margin: 0rpx auto; }
						}
						
					}
				}
			
				
			
			
			}
	 
	 // 	.tab-title {
	 // 		position: absolute;
	 // 		top: 70rpx;
	 // 		left: 50%;
	 // 		transform: translateX(-50%);
	 // 		color: #fff;
	 // 	}
	 
	 // 	.tab-tag {
	 // 		position: absolute;
	 // 		top: 120rpx;
	 // 		left: 50%;
	 // 		transform: translateX(-50%);
	 // 		padding: 2rpx 16rpx;
	 // 		font-size: 20rpx;
	 // 		letter-spacing: 2rpx;
	 // 		background-color: #FAB714;
	 // 		border-radius: 14rpx;
	 // 	}
	 }
	 
	
	
	.btn{
		width: 560rpx;
		height: 80rpx;
		background: linear-gradient( 90deg, #0FBCD6 0%, #0CCA91 100%);
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		margin: 20rpx auto;
		font-family: Alibaba PuHuiTi 3.0, Alibaba PuHuiTi 30;
		font-weight: 700;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
	}
	
</style>